<template>
    <div class="like">
        <div class="like-top">
            <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png">
            <span>猜你喜欢</span>
        </div>
        <div class="like-list">
            <ul>
                <li v-for="item in likeList" :key="item.id"
                @click="todetail">
                    <img :src="item.imgUrl" alt="">
                    <div class="list-cnotent">
                        <div class="title">{{item.title}}</div>
                        <div>{{item.message}}</div>
                        <div class="list-foot">
                            <span>
                                <span class="price">￥{{item.pre}}</span>
                                <span>起</span>
                            </span>
                            <span>{{item.map}}</span>
                        </div>
                    </div>
                </li>
                
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props:['likeList'],
    data(){
        return{
            
        }
    },
    methods:{
        todetail(){
            this.$router.push('/detail')
        }
    }
}
</script>

<style scoped>
.like{
    padding: 5px;
    margin-top: 10px;
    background-color: #fff;
}
.like-top{
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    margin-bottom: 10px;
}
.like-top img{
    
    width: 20px;
    height: 20px;
}
.like-list{
    width: 100%;
    font-size: 12px;
}
.like-list img{
    width: 30%;
}
.like-list ul li{
    display: flex;
    margin: 10px;
    padding: 0 0 8px 0px;
    border-bottom: 1px solid #ccc;
}
 .like-list ul li .list-cnotent{
     
     flex:1
 }
 .like-list ul li .list-cnotent .title{
     font-size: 16px;
     font-weight: 600;
 }
 .like-list ul li .list-cnotent div{
     padding: 5px 8px;
 }
   .like-list ul li .list-cnotent .list-foot{
       display: flex;
       justify-content:space-between;
       font-weight: 700;
   }
  .like-list ul li .list-cnotent .price{
      color: rgb(219, 110, 38);
      font-size: 16px;
      
  }
</style>